<template>
    <div class="app_container">
        <el-form :inline="true" :model="filter" size="small">
            <el-form-item label="类型">
                <el-select v-model="filter.type" placeholder="请选择" clearable style="width:120px;">
                    <el-option label="个人" value="PERSONAL"></el-option>
                    <el-option label="企业" value="BUSINESS"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="姓名">
                <el-input placeholder="请输入" v-model="filter.name" clearable></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input placeholder="请输入" v-model="filter.email" clearable></el-input>
            </el-form-item>
            <el-form-item label="手机号">
                <el-input placeholder="请输入" v-model="filter.phone" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onFilter">查询</el-button>
            </el-form-item>
        </el-form>

        <!-- 列表 -->
        <el-table border stripe :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="ID" width="60"></el-table-column>
            <el-table-column label="姓名" width="100">
                <template slot-scope="scope">
                    <!-- <el-button type="text" @click="goDetail(scope.row.id)" v-if="checkRule(['/upsPost/detail'])">{{ scope.row.name }}</el-button>
                    <div v-else>{{ scope.row.name }}</div> -->
                    <div>{{ scope.row.name }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="email" label="邮箱" width="200"></el-table-column>
            <el-table-column prop="type_text" label="客户类型" width="80"></el-table-column>
            <el-table-column prop="company" label="企业名称" width="150"></el-table-column>
            <el-table-column prop="leaveMessage" label="留言"></el-table-column>
            <el-table-column prop="phone" label="电话" width="120"></el-table-column>
            <el-table-column prop="whatsapp" label="whatsapp" width="120"></el-table-column>
            <el-table-column prop="wechat" label="微信" width="120"></el-table-column>
            <el-table-column prop="currentBusinessType_text" label="经营类型" width="100"></el-table-column>
            <el-table-column prop="preferredCoopMode_text" label="合作意向模式" width="110"></el-table-column>
            <el-table-column prop="createTime" label="发布时间" width="160"></el-table-column>
        </el-table>
        <br />

        <el-row type="flex" justify="center">
            <el-pagination background layout="prev, pager, next" :current-page="filter.pageNum" :page-size="filter.pageSize" :total="total" @current-change="changePage"></el-pagination>
        </el-row>

    </div>
</template>

<script>
import { apiContactList } from "@/api/contactManage.js";
import { checkPermission } from "@/directive/role/role.js"
export default {
    name: 'post_index',
    data() {
        return {
            tableData: [],
            total: 0,
            filter: {
                pageNum: 1, pageSize: 10,
                type: '',
                name: '',
                email: '',
                phone: '',
            },
        }
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
            apiContactList(this.filter).then(res => {
                res.data.forEach(item => {
                    switch (item.type) {
                        case 'PERSONAL':
                            item.type_text = '个人'
                            break;
                        case 'BUSINESS':
                            item.type_text = '企业'
                            break;
                    }
                    switch (item.currentBusinessType) {
                        case 'distributor':
                            item.currentBusinessType_text = '经销商'
                            break;
                        case 'ecommerce':
                            item.currentBusinessType_text = '电商卖家'
                            break;
                        case 'physical_store':
                            item.currentBusinessType_text = '实体店铺'
                            break;
                        case 'individual':
                            item.currentBusinessType_text = '个体户'
                            break;
                        case 'manufacturer':
                            item.currentBusinessType_text = '生产厂家'
                            break;
                        case 'other':
                            item.currentBusinessType_text = '其他'
                            break;
                    }
                    switch (item.preferredCoopMode) {
                        case 'wholesale':
                            item.preferredCoopMode_text = '批发采购'
                            break;
                        case 'brand_agent':
                            item.preferredCoopMode_text = '品牌代理'
                            break;
                        case 'oem_odm':
                            item.preferredCoopMode_text = 'ODM / OEM代工'
                            break;
                        case 'crossborder_distribution':
                            item.preferredCoopMode_text = '跨境分销'
                            break;
                        case 'warehouse_coop':
                            item.preferredCoopMode_text = '仓储合作'
                            break;
                        case 'system_integration':
                            item.preferredCoopMode_text = '系统对接'
                            break;
                        case 'other':
                            item.preferredCoopMode_text = '其他方式'
                            break;
                    }
                })
                this.tableData = res.data;
                this.total = res.total;
                this.filter.pageNum = res.pageNum;
            });
        },
        changePage(page) {
            this.filter.pageNum = page
            this.getData()
        },
        onFilter() {
            this.filter.pageNum = 1
            this.getData()
        },
        checkRule(rule) {
            return checkPermission('', { value: rule })
        },
        goDetail(id) {
            this.$router.push({ path: '/postManage/post_detail', query: { id } })
        },
    },
}
</script>

<style></style>